<div class="content" [ngClass]="{ shadowed: isSymbolSelectionOpened || isConfiguratorOpened }">
  <div class="default-header">
    <div class="row">
      <h1 class="col">VMware VM configuration</h1>
    </div>
  </div>
  <div class="default-content" *ngIf="vmwareTemplate">
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> General settings </mat-panel-title>
        </mat-expansion-panel-header>
        <form [formGroup]="generalSettingsForm">
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              [(ngModel)]="vmwareTemplate.name"
              formControlName="templateName"
              placeholder="Template name"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              [(ngModel)]="vmwareTemplate.default_name_format"
              formControlName="defaultName"
              placeholder="Default name format"
            />
          </mat-form-field>
          <mat-form-field class="form-field">
            <input
              matInput
              type="text"
              [(ngModel)]="vmwareTemplate.symbol"
              formControlName="symbol"
              placeholder="Symbol"
            />
          </mat-form-field>
          <button mat-button class="symbolSelectionButton" (click)="chooseSymbol()">Choose symbol</button><br /><br />
          <mat-form-field class="form-field">
            <mat-select
              placeholder="Category"
              [ngModelOptions]="{ standalone: true }"
              [(ngModel)]="vmwareTemplate.category"
            >
              <mat-option *ngFor="let category of categories" [value]="category[1]">
                {{ category[0] }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="select">
            <mat-select
              placeholder="Console type"
              [ngModelOptions]="{ standalone: true }"
              [(ngModel)]="vmwareTemplate.console_type"
            >
              <mat-option *ngFor="let type of consoleTypes" [value]="type">
                {{ type }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.console_auto_start">
            Auto start console
          </mat-checkbox>
          <mat-form-field class="form-field">
            <mat-select
              placeholder="On close"
              [ngModelOptions]="{ standalone: true }"
              [(ngModel)]="vmwareTemplate.on_close"
            >
              <mat-option *ngFor="let option of onCloseOptions" [value]="option[1]">
                {{ option[0] }}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.headless">
            Start VM in headless mode </mat-checkbox
          ><br /><br />
          <mat-checkbox [ngModelOptions]="{ standalone: true }" [(ngModel)]="vmwareTemplate.linked_clone">
            Use as a linked base VM (experimental)
          </mat-checkbox>
        </form>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Network </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-form-field class="form-field">
          <input matInput type="number" [(ngModel)]="vmwareTemplate.adapters" placeholder="Adapters" />
        </mat-form-field>
        <mat-form-field class="form-field">
          <input matInput type="text" [(ngModel)]="vmwareTemplate.first_port_name" placeholder="First port name" />
        </mat-form-field>
        <mat-form-field class="form-field">
          <input matInput type="text" [(ngModel)]="vmwareTemplate.port_name_format" placeholder="Name format" />
        </mat-form-field>
        <mat-form-field class="form-field">
          <input matInput type="number" [(ngModel)]="vmwareTemplate.port_segment_size" placeholder="Segment size" />
        </mat-form-field>
        <mat-form-field class="form-field">
          <mat-select placeholder="Type" [(ngModel)]="vmwareTemplate.adapter_type">
            <mat-option *ngFor="let type of networkTypes" [value]="type">
              {{ type }}
            </mat-option>
          </mat-select>
        </mat-form-field>
        <button mat-button class="configButton" (click)="setCustomAdaptersConfiguratorState(true)">
          Configure custom adapters</button
        ><br />
        <mat-checkbox [(ngModel)]="vmwareTemplate.use_any_adapter">
          Allow GNS3 to override non custom VMware adapter
        </mat-checkbox>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title> Usage </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-form-field class="form-field">
          <textarea matInput type="text" [(ngModel)]="vmwareTemplate.usage"></textarea>
        </mat-form-field>
      </mat-expansion-panel>
    </mat-accordion>
    <div class="buttons-bar">
      <button class="cancel-button" (click)="goBack()" mat-button>Cancel</button>
      <button mat-raised-button color="primary" (click)="onSave()">Save</button>
    </div>
  </div>
</div>
<app-custom-adapters
  [hidden]="!(isConfiguratorOpened && vmwareTemplate)"
  #customAdaptersConfigurator
  [networkTypes]="networkTypes"
  [displayedColumns]="displayedColumns"
  (closeConfiguratorEmitter)="setCustomAdaptersConfiguratorState($event)"
  (saveConfigurationEmitter)="saveCustomAdapters($event)"
></app-custom-adapters>
<app-symbols-menu
  *ngIf="isSymbolSelectionOpened && vmwareTemplate"
  [server]="server"
  [symbol]="vmwareTemplate.symbol"
  (symbolChangedEmitter)="symbolChanged($event)"
></app-symbols-menu>
